<head>
  <meta charset=UTF-8>
</head>
<body>
<script type="text/javascript" src="jquery-3.1.1.js">
</script>
<input id="bn1" type="button" value="执行动画" /><br />
<div id="test1">自定义动画控制的元素</div>
<script type="text/javascript">
  //为id为bn1的按钮绑定事件处理函数
  $("#bn1").click(function()
    {
      //为id为test1的元素指定自定义动画
      $("#test1").animate(
        //下面的JavaScript对象指定动画结束时目标元素的状态
        {
          fontSize:"24pt",
          width:"400px",
          opacity:0.5
        },
        //下面的对象指定动画详细选项
        {
          duration:2000,
          easing:"swing",
          complete:function()
          {
            alert('动画执行完成！');
          }
        }
      );
    }
  );
</script>
</body>
